<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增广告图')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-banner-add">

            <div class="form-group">    
                <label class="col-sm-3 control-label">广告图：</label>
                <div class="col-sm-8">
<!--                    <input name="bannerImg" class="form-control" type="text">-->
                    <input name="file" class="myfile"  type="file">
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">图片名称：</label>
                <div class="col-sm-8">
                    <input name="bannerName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="bannerSort" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var fileurl="https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200617185527.png";		//上传成功返回的图片地址
        var prefix = ctx + "system/banner"
        $("#form-banner-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                // $.operate.save(prefix + "/add", $('#form-banner-add').serialize());
                var data=$('#form-banner-add').serializeArray();
                data.push({"name": "bannerImg", "value": fileurl});
                $.operate.save(prefix + "/add", data);
            }
        }
        //文件上传
        $(".myfile").fileinput({

            uploadUrl:ctx+"common/upload", //接受请求地址
            //deleteUrl:ctx+"common/download",//删除请求地址
            uploadAsync : true, //默认异步上传
            showUpload : false, //是否显示上传按钮,跟随文本框的那个
            showRemove : false, //显示移除按钮,跟随文本框的那个
            showCaption : true,//是否显示标题,就是那个文本框
            showPreview : true, //是否显示预览,不写默认为true
            dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            // maxImageWidth: 300,//图片的最大宽度
            // maxImageHeight: 300,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount : 1, //表示允许同时上传的最大文件个数
            enctype : 'multipart/form-data',
            validateInitialCount : true,
            previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
            allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
            allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
            language : 'zh'
        })
        //异步上传错误结果处理
        $('.myfile').on('fileerror', function(event, data, msg) {
            console.log("fileerror");
            console.log(data);
        });
        //异步上传成功结果处理
        $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
            console.log("fileuploaded+上传成功");
            console.log("返回值"+data.response.fileName);
            //var ref = $(this).attr("data-ref");
            fileurl=data.response.fileName;
            // alert( $("input[name='" + file + "']").val(data.response.fileName));

        });

        //上传前
        $('.myfile').on('filepreupload', function(event, data, previewId, index) {
            console.log("filepreupload+上传前");
        });
    </script>
</body>
</html>